ರಿಯಾಕ್ಟ್‌ನ useDeferredValue ಹೂಕ್‌ನ ಆಳವಾದ ವಿಶ್ಲೇಷಣೆ. UI ಲ್ಯಾಗ್ ಸರಿಪಡಿಸುವುದು, ಕನ್‌ಕರೆನ್ಸಿ ಅರ್ಥಮಾಡುವುದು, useTransition ಜೊತೆ ಹೋಲಿಸುವುದು ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೇಗದ ಆ್ಯಪ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದನ್ನು ಕಲಿಯಿರಿ.
ರಿಯಾಕ್ಟ್‌ನ useDeferredValue: ನಾನ್-ಬ್ಲಾಕಿಂಗ್ UI ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಅಂತಿಮ ಮಾರ್ಗದರ್ಶಿ
ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ಜಗತ್ತಿನಲ್ಲಿ, ಬಳಕೆದಾರರ ಅನುಭವವು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ವೇಗವಾದ, ಸ್ಪಂದನಾಶೀಲ ಇಂಟರ್ಫೇಸ್ ಇನ್ನು ಮುಂದೆ ಐಷಾರಾಮಿಯಾಗಿಲ್ಲ - ಅದೊಂದು ನಿರೀಕ್ಷೆಯಾಗಿದೆ. ಪ್ರಪಂಚದಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ, ವಿವಿಧ ಸಾಧನಗಳು ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಲ್ಲಿ, ನಿಧಾನಗತಿಯ, ಜರ್ಕಿ UIಯು ಹಿಂತಿರುಗುವ ಗ್ರಾಹಕ ಮತ್ತು ಕಳೆದುಹೋದ ಗ್ರಾಹಕರ ನಡುವಿನ ವ್ಯತ್ಯಾಸವನ್ನುಂಟುಮಾಡಬಹುದು. ಇಲ್ಲಿಯೇ ರಿಯಾಕ್ಟ್ 18ರ ಕನ್‌ಕರೆಂಟ್ ವೈಶಿಷ್ಟ್ಯಗಳು, ವಿಶೇಷವಾಗಿ useDeferredValue ಹೂಕ್, ಆಟವನ್ನೇ ಬದಲಾಯಿಸುತ್ತವೆ.
ನೀವು ಎಂದಾದರೂ ದೊಡ್ಡ ಪಟ್ಟಿಯನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವ ಸರ್ಚ್ ಫೀಲ್ಡ್, ನೈಜ-ಸಮಯದಲ್ಲಿ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಡೇಟಾ ಗ್ರಿಡ್, ಅಥವಾ ಸಂಕೀರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಹೊಂದಿರುವ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸಿದ್ದರೆ, ನೀವು ಬಹುಶಃ ಭಯಾನಕ UI ಫ್ರೀಜ್ ಅನ್ನು ಎದುರಿಸಿರಬಹುದು. ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡಿದಾಗ, ಒಂದು ಕ್ಷಣದ ಮಟ್ಟಿಗೆ, ಇಡೀ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರತಿಕ್ರಿಯಿಸುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ. ಸಾಂಪ್ರದಾಯಿಕ ರಿಯಾಕ್ಟ್ ರೆಂಡರಿಂಗ್ ಬ್ಲಾಕಿಂಗ್ ಆಗಿರುವುದರಿಂದ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಒಂದು ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಮರು-ರೆಂಡರ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ, ಮತ್ತು ಅದು ಮುಗಿಯುವವರೆಗೆ ಬೇರೇನೂ ಆಗಲು ಸಾಧ್ಯವಿಲ್ಲ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು useDeferredValue ಹೂಕ್‌ನ ಆಳವಾದ ಅಧ್ಯಯನಕ್ಕೆ ಕೊಂಡೊಯ್ಯುತ್ತದೆ. ಅದು ಯಾವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತದೆ, ರಿಯಾಕ್ಟ್‌ನ ಹೊಸ ಕನ್‌ಕರೆಂಟ್ ಇಂಜಿನ್‌ನೊಂದಿಗೆ ತೆರೆಮರೆಯಲ್ಲಿ ಅದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಕೆಲಸ ಮಾಡುತ್ತಿರುವಾಗಲೂ ವೇಗವಾಗಿ ಭಾಸವಾಗುವಂತಹ ನಂಬಲಾಗದಷ್ಟು ಸ್ಪಂದನಾಶೀಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನೀವು ಅದನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ನಾವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು, ಸುಧಾರಿತ ಪ್ಯಾಟರ್ನ್‌ಗಳು ಮತ್ತು ನಿರ್ಣಾಯಕ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಚರ್ಚಿಸುತ್ತೇವೆ.
ಮೂಲ ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಬ್ಲಾಕಿಂಗ್ UI
ನಾವು ಪರಿಹಾರವನ್ನು ಶ್ಲಾಘಿಸುವ ಮೊದಲು, ನಾವು ಸಮಸ್ಯೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕು. ರಿಯಾಕ್ಟ್ 18ಕ್ಕಿಂತ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳಲ್ಲಿ, ರೆಂಡರಿಂಗ್ ಒಂದು ಸಿಂಕ್ರೊನಸ್ ಮತ್ತು ಅಡೆತಡೆಯಿಲ್ಲದ ಪ್ರಕ್ರಿಯೆಯಾಗಿತ್ತು. ಒಂದೇ ಲೇನ್ ರಸ್ತೆಯನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ: ಒಮ್ಮೆ ಒಂದು ಕಾರು (ರೆಂಡರ್) ಪ್ರವೇಶಿಸಿದರೆ, ಅದು ಕೊನೆಯನ್ನು ತಲುಪುವವರೆಗೆ ಬೇರೆ ಯಾವುದೇ ಕಾರು ಹಾದುಹೋಗಲು ಸಾಧ್ಯವಿಲ್ಲ. ರಿಯಾಕ್ಟ್ ಹೀಗೆಯೇ ಕೆಲಸ ಮಾಡುತ್ತಿತ್ತು.
ಒಂದು ಶ್ರೇಷ್ಠ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸೋಣ: ಉತ್ಪನ್ನಗಳ ಹುಡುಕಬಹುದಾದ ಪಟ್ಟಿ. ಬಳಕೆದಾರರು ಸರ್ಚ್ ಬಾಕ್ಸ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡುತ್ತಾರೆ, ಮತ್ತು ಅದರ ಕೆಳಗಿನ ಸಾವಿರಾರು ಐಟಂಗಳ ಪಟ್ಟಿಯು ಅವರ ಇನ್‌ಪುಟ್ ಆಧರಿಸಿ ಫಿಲ್ಟರ್ ಆಗುತ್ತದೆ.
ಒಂದು ವಿಶಿಷ್ಟ (ಮತ್ತು ನಿಧಾನಗತಿಯ) ಅನುಷ್ಠಾನ
ರಿಯಾಕ್ಟ್ 18ಕ್ಕಿಂತ ಹಿಂದಿನ ಜಗತ್ತಿನಲ್ಲಿ, ಅಥವಾ ಕನ್‌ಕರೆಂಟ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸದೆ, ಕೋಡ್ ಈ ರೀತಿ ಕಾಣಿಸಬಹುದು:
ಕಾಂಪೊನೆಂಟ್ ರಚನೆ:
ಫೈಲ್: SearchPage.js
import React, { useState } from 'react';
import ProductList from './ProductList';
import { generateProducts } from './data'; // a function that creates a large array
const allProducts = generateProducts(20000); // Let's imagine 20,000 products
function SearchPage() {
const [query, setQuery] = useState('');
const filteredProducts = allProducts.filter(product => {
return product.name.toLowerCase().includes(query.toLowerCase());
});
function handleChange(e) {
setQuery(e.target.value);
}
return (
ಇದು ಏಕೆ ನಿಧಾನವಾಗಿದೆ?
ಬಳಕೆದಾರರ ಕ್ರಿಯೆಯನ್ನು ಪತ್ತೆಹಚ್ಚೋಣ:
- ಬಳಕೆದಾರರು ಒಂದು ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಾರೆ, ಉದಾಹರಣೆಗೆ 'a'.
- onChange ಈವೆಂಟ್ ಫೈರ್ ಆಗುತ್ತದೆ, handleChange ಅನ್ನು ಕರೆಯುತ್ತದೆ.
- setQuery('a') ಕರೆಯಲ್ಪಡುತ್ತದೆ. ಇದು SearchPage ಕಾಂಪೊನೆಂಟ್‌ನ ಮರು-ರೆಂಡರ್ ಅನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.
- ರಿಯಾಕ್ಟ್ ಮರು-ರೆಂಡರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.
- ರೆಂಡರ್ ಒಳಗೆ,
const filteredProducts = allProducts.filter(...)ಲೈನ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಇದು ದುಬಾರಿ ಭಾಗ. 20,000 ಐಟಂಗಳ ಅರೇಯನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು, ಸರಳ 'includes' ಚೆಕ್‌ನೊಂದಿಗೆ ಕೂಡ, ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. - ಈ ಫಿಲ್ಟರಿಂಗ್ ನಡೆಯುತ್ತಿರುವಾಗ, ಬ್ರೌಸರ್‌ನ ಮುಖ್ಯ ಥ್ರೆಡ್ ಸಂಪೂರ್ಣವಾಗಿ ಆಕ್ರಮಿಸಿಕೊಂಡಿರುತ್ತದೆ. ಅದು ಯಾವುದೇ ಹೊಸ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಸಾಧ್ಯವಿಲ್ಲ, ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ, ಮತ್ತು ಬೇರೆ ಯಾವುದೇ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ರನ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ. UI ಬ್ಲಾಕ್ ಆಗಿದೆ.
- ಫಿಲ್ಟರಿಂಗ್ ಮುಗಿದ ನಂತರ, ರಿಯಾಕ್ಟ್ ProductList ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಮುಂದುವರಿಯುತ್ತದೆ, ಅದು ಸಾವಿರಾರು DOM ನೋಡ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತಿದ್ದರೆ ಅದೂ ಕೂಡ ಒಂದು ಭಾರೀ ಕಾರ್ಯಾಚರಣೆಯಾಗಿರಬಹುದು.
- ಅಂತಿಮವಾಗಿ, ಈ ಎಲ್ಲಾ ಕೆಲಸದ ನಂತರ, DOM ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಇನ್‌ಪುಟ್ ಬಾಕ್ಸ್‌ನಲ್ಲಿ 'a' ಅಕ್ಷರ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಮತ್ತು ಪಟ್ಟಿ ಅಪ್‌ಡೇಟ್ ಆಗುವುದನ್ನು ನೋಡುತ್ತಾರೆ.
ಬಳಕೆದಾರರು ವೇಗವಾಗಿ ಟೈಪ್ ಮಾಡಿದರೆ - ಉದಾಹರಣೆಗೆ, "apple" - ಈ ಸಂಪೂರ್ಣ ಬ್ಲಾಕಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯು 'a', ನಂತರ 'ap', ನಂತರ 'app', 'appl', ಮತ್ತು 'apple' ಗಾಗಿ ನಡೆಯುತ್ತದೆ. ಇದರ ಪರಿಣಾಮವಾಗಿ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ತೊದಲುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ಟೈಪಿಂಗ್‌ಗೆ ಸರಿಸಾಟಿಯಾಗಿರಲು ಹೆಣಗಾಡುವ ಗಮನಾರ್ಹ ಲ್ಯಾಗ್ ಉಂಟಾಗುತ್ತದೆ. ಇದು ಕಳಪೆ ಬಳಕೆದಾರರ ಅನುಭವ, ವಿಶೇಷವಾಗಿ ಪ್ರಪಂಚದ ಅನೇಕ ಭಾಗಗಳಲ್ಲಿ ಸಾಮಾನ್ಯವಾದ ಕಡಿಮೆ ಶಕ್ತಿಯುತ ಸಾಧನಗಳಲ್ಲಿ.
ರಿಯಾಕ್ಟ್ 18ರ ಕನ್‌ಕರೆನ್ಸಿಯ ಪರಿಚಯ
ರಿಯಾಕ್ಟ್ 18 ಕನ್‌ಕರೆನ್ಸಿಯನ್ನು ಪರಿಚಯಿಸುವ ಮೂಲಕ ಈ ಮಾದರಿಯನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸುತ್ತದೆ. ಕನ್‌ಕರೆನ್ಸಿ ಎಂದರೆ ಪ್ಯಾರಲಲಿಸಂ (ಒಂದೇ ಸಮಯದಲ್ಲಿ ಅನೇಕ ಕೆಲಸಗಳನ್ನು ಮಾಡುವುದು) ಅಲ್ಲ. ಬದಲಾಗಿ, ಇದು ರಿಯಾಕ್ಟ್ ರೆಂಡರ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸುವ, ಪುನರಾರಂಭಿಸುವ ಅಥವಾ ಕೈಬಿಡುವ ಸಾಮರ್ಥ್ಯವಾಗಿದೆ. ಒಂದೇ ಲೇನ್ ರಸ್ತೆಗೆ ಈಗ ಪಾಸಿಂಗ್ ಲೇನ್‌ಗಳು ಮತ್ತು ಟ್ರಾಫಿಕ್ ಕಂಟ್ರೋಲರ್ ಇದೆ.
ಕನ್‌ಕರೆನ್ಸಿಯೊಂದಿಗೆ, ರಿಯಾಕ್ಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಎರಡು ಪ್ರಕಾರಗಳಾಗಿ ವರ್ಗೀಕರಿಸಬಹುದು:
- ತುರ್ತು ಅಪ್‌ಡೇಟ್‌ಗಳು: ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡುವುದು, ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವುದು, ಅಥವಾ ಸ್ಲೈಡರ್ ಅನ್ನು ಎಳೆಯುವಂತಹ ತಕ್ಷಣವೇ ಆಗಬೇಕೆಂದು ಭಾಸವಾಗುವ ವಿಷಯಗಳು. ಬಳಕೆದಾರರು ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ.
- ಟ್ರಾನ್ಸಿಶನ್ ಅಪ್‌ಡೇಟ್‌ಗಳು: ಇವು UI ಅನ್ನು ಒಂದು ವೀಕ್ಷಣೆಯಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಬದಲಾಯಿಸುವ ಅಪ್‌ಡೇಟ್‌ಗಳಾಗಿವೆ. ಇವು ಕಾಣಿಸಿಕೊಳ್ಳಲು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಂಡರೆ ಸ್ವೀಕಾರಾರ್ಹ. ಪಟ್ಟಿಯನ್ನು ಫಿಲ್ಟರ್ ಮಾಡುವುದು ಅಥವಾ ಹೊಸ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡುವುದು ಶ್ರೇಷ್ಠ ಉದಾಹರಣೆಗಳಾಗಿವೆ.
ರಿಯಾಕ್ಟ್ ಈಗ ತುರ್ತು-ಅಲ್ಲದ "ಟ್ರಾನ್ಸಿಶನ್" ರೆಂಡರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು, ಮತ್ತು ಹೆಚ್ಚು ತುರ್ತಾದ ಅಪ್‌ಡೇಟ್ (ಇನ್ನೊಂದು ಕೀಸ್ಟ್ರೋಕ್‌ನಂತೆ) ಬಂದರೆ, ಅದು ದೀರ್ಘ-ಚಾಲನೆಯ ರೆಂಡರ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸಿ, ಮೊದಲು ತುರ್ತು ಅಪ್‌ಡೇಟ್ ಅನ್ನು ನಿಭಾಯಿಸಿ, ತದನಂತರ ತನ್ನ ಕೆಲಸವನ್ನು ಪುನರಾರಂಭಿಸಬಹುದು. ಇದು UI ಎಲ್ಲಾ ಸಮಯದಲ್ಲೂ ಸಂವಾದಾತ್ಮಕವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. useDeferredValue ಹೂಕ್ ಈ ಹೊಸ ಶಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ಪ್ರಾಥಮಿಕ ಸಾಧನವಾಗಿದೆ.
`useDeferredValue` ಎಂದರೇನು? ವಿವರವಾದ ವಿವರಣೆ
ಅದರ ಮೂಲದಲ್ಲಿ, useDeferredValue ಒಂದು ಹೂಕ್ ಆಗಿದ್ದು, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನಲ್ಲಿ ಒಂದು ನಿರ್ದಿಷ್ಟ ಮೌಲ್ಯವು ತುರ್ತಾಗಿಲ್ಲ ಎಂದು ರಿಯಾಕ್ಟ್‌ಗೆ ಹೇಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಒಂದು ಮೌಲ್ಯವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಆ ಮೌಲ್ಯದ ಹೊಸ ಪ್ರತಿಯನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ, ಅದು ತುರ್ತು ಅಪ್‌ಡೇಟ್‌ಗಳು ನಡೆಯುತ್ತಿದ್ದರೆ "ಹಿಂದೆ ಉಳಿಯುತ್ತದೆ".
ಸಿಂಟ್ಯಾಕ್ಸ್
ಈ ಹೂಕ್ ಅನ್ನು ಬಳಸುವುದು ನಂಬಲಾಗದಷ್ಟು ಸರಳವಾಗಿದೆ:
import { useDeferredValue } from 'react';
const deferredValue = useDeferredValue(value);
ಅಷ್ಟೇ. ನೀವು ಅದಕ್ಕೆ ಒಂದು ಮೌಲ್ಯವನ್ನು ನೀಡುತ್ತೀರಿ, ಮತ್ತು ಅದು ನಿಮಗೆ ಆ ಮೌಲ್ಯದ ಡಿಫರ್ಡ್ ಆವೃತ್ತಿಯನ್ನು ನೀಡುತ್ತದೆ.
ಇದು ತೆರೆಮರೆಯಲ್ಲಿ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
ಈ ಮ್ಯಾಜಿಕ್ ಅನ್ನು ಸ್ಪಷ್ಟಪಡಿಸೋಣ. ನೀವು useDeferredValue(query) ಅನ್ನು ಬಳಸಿದಾಗ, ರಿಯಾಕ್ಟ್ ಏನು ಮಾಡುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:
- ಆರಂಭಿಕ ರೆಂಡರ್: ಮೊದಲ ರೆಂಡರ್‌ನಲ್ಲಿ, deferredQueryಯು ಆರಂಭಿಕ queryಯಂತೆಯೇ ಇರುತ್ತದೆ.
- ಒಂದು ತುರ್ತು ಅಪ್‌ಡೇಟ್ ಸಂಭವಿಸುತ್ತದೆ: ಬಳಕೆದಾರರು ಹೊಸ ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡುತ್ತಾರೆ. query ಸ್ಟೇಟ್ 'a' ನಿಂದ 'ap' ಗೆ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತದೆ.
- ಹೆಚ್ಚಿನ-ಆದ್ಯತೆಯ ರೆಂಡರ್: ರಿಯಾಕ್ಟ್ ತಕ್ಷಣವೇ ಮರು-ರೆಂಡರ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ. ಈ ಮೊದಲ, ತುರ್ತು ಮರು-ರೆಂಡರ್ ಸಮಯದಲ್ಲಿ, useDeferredValue ಒಂದು ತುರ್ತು ಅಪ್‌ಡೇಟ್ ಪ್ರಗತಿಯಲ್ಲಿದೆ ಎಂದು ತಿಳಿದಿರುತ್ತದೆ. ಆದ್ದರಿಂದ, ಅದು ಇನ್ನೂ ಹಿಂದಿನ ಮೌಲ್ಯವನ್ನು, ಅಂದರೆ 'a' ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ವೇಗವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ ಏಕೆಂದರೆ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನ ಮೌಲ್ಯವು 'ap' ಆಗುತ್ತದೆ (ಸ್ಟೇಟ್‌ನಿಂದ), ಆದರೆ ನಿಮ್ಮ UIನ deferredQuery ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುವ ಭಾಗ (ನಿಧಾನವಾದ ಪಟ್ಟಿ) ಇನ್ನೂ ಹಳೆಯ ಮೌಲ್ಯವನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಮರು-ಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ. UI ಸ್ಪಂದನಾಶೀಲವಾಗಿರುತ್ತದೆ.
- ಕಡಿಮೆ-ಆದ್ಯತೆಯ ರೆಂಡರ್: ತುರ್ತು ರೆಂಡರ್ ಪೂರ್ಣಗೊಂಡ ತಕ್ಷಣ, ರಿಯಾಕ್ಟ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಎರಡನೇ, ತುರ್ತು-ಅಲ್ಲದ ಮರು-ರೆಂಡರ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. *ಈ* ರೆಂಡರ್‌ನಲ್ಲಿ, useDeferredValue ಹೊಸ ಮೌಲ್ಯ, 'ap' ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಈ ಹಿನ್ನೆಲೆ ರೆಂಡರ್ ದುಬಾರಿ ಫಿಲ್ಟರಿಂಗ್ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
- ಅಡೆತಡೆಯ ಸಾಮರ್ಥ್ಯ (Interruptibility): ಇಲ್ಲಿದೆ ಪ್ರಮುಖ ಭಾಗ. 'ap' ಗಾಗಿ ಕಡಿಮೆ-ಆದ್ಯತೆಯ ರೆಂಡರ್ ಇನ್ನೂ ಪ್ರಗತಿಯಲ್ಲಿರುವಾಗ ಬಳಕೆದಾರರು ಇನ್ನೊಂದು ಅಕ್ಷರವನ್ನು ('app') ಟೈಪ್ ಮಾಡಿದರೆ, ರಿಯಾಕ್ಟ್ ಆ ಹಿನ್ನೆಲೆ ರೆಂಡರ್ ಅನ್ನು ಬದಿಗಿಟ್ಟು ಮತ್ತೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಅದು ಹೊಸ ತುರ್ತು ಅಪ್‌ಡೇಟ್ ('app')ಗೆ ಆದ್ಯತೆ ನೀಡುತ್ತದೆ, ಮತ್ತು ನಂತರ ಇತ್ತೀಚಿನ ಡಿಫರ್ಡ್ ಮೌಲ್ಯದೊಂದಿಗೆ ಹೊಸ ಹಿನ್ನೆಲೆ ರೆಂಡರ್ ಅನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.
ಇದು ದುಬಾರಿ ಕೆಲಸವು ಯಾವಾಗಲೂ ಇತ್ತೀಚಿನ ಡೇಟಾದ ಮೇಲೆ ಮಾಡಲ್ಪಡುತ್ತದೆ ಮತ್ತು ಅದು ಬಳಕೆದಾರರಿಗೆ ಹೊಸ ಇನ್‌ಪುಟ್ ಒದಗಿಸುವುದನ್ನು ಎಂದಿಗೂ ತಡೆಯುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಸಂಕೀರ್ಣವಾದ ಮ್ಯಾನುಯಲ್ ಡಿಬೌನ್ಸಿಂಗ್ ಅಥವಾ ಥ್ರಾಟ್ಲಿಂಗ್ ಲಾಜಿಕ್ ಇಲ್ಲದೆ ಭಾರೀ ಲೆಕ್ಕಾಚಾರಗಳಿಗೆ ಕಡಿಮೆ ಆದ್ಯತೆ ನೀಡಲು ಇದು ಒಂದು ಶಕ್ತಿಯುತ ಮಾರ್ಗವಾಗಿದೆ.
ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನ: ನಮ್ಮ ನಿಧಾನಗತಿಯ ಹುಡುಕಾಟವನ್ನು ಸರಿಪಡಿಸುವುದು
ನಮ್ಮ ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು useDeferredValue ಬಳಸಿ ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡಿ ಅದು ಕಾರ್ಯರೂಪದಲ್ಲಿ ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ.
ಫೈಲ್: SearchPage.js (ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲಾಗಿದೆ)
import React, { useState, useDeferredValue, useMemo } from 'react';
import ProductList from './ProductList';
import { generateProducts } from './data';
const allProducts = generateProducts(20000);
// A component to display the list, memoized for performance
const MemoizedProductList = React.memo(ProductList);
function SearchPage() {
const [query, setQuery] = useState('');
// 1. Defer the query value. This value will lag behind the 'query' state.
const deferredQuery = useDeferredValue(query);
// 2. The expensive filtering is now driven by the deferredQuery.
// We also wrap this in useMemo for further optimization.
const filteredProducts = useMemo(() => {
console.log('Filtering for:', deferredQuery);
return allProducts.filter(product => {
return product.name.toLowerCase().includes(deferredQuery.toLowerCase());
});
}, [deferredQuery]); // Only re-calculates when deferredQuery changes
function handleChange(e) {
// This state update is urgent and will be processed immediately
setQuery(e.target.value);
}
return (
ಬಳಕೆದಾರರ ಅನುಭವದಲ್ಲಿನ ಪರಿವರ್ತನೆ
ಈ ಸರಳ ಬದಲಾವಣೆಯೊಂದಿಗೆ, ಬಳಕೆದಾರರ ಅನುಭವವು ರೂಪಾಂತರಗೊಳ್ಳುತ್ತದೆ:
- ಬಳಕೆದಾರರು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ನಲ್ಲಿ ಟೈಪ್ ಮಾಡುತ್ತಾರೆ, ಮತ್ತು ಪಠ್ಯವು ಶೂನ್ಯ ಲ್ಯಾಗ್‌ನೊಂದಿಗೆ ತಕ್ಷಣವೇ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಏಕೆಂದರೆ ಇನ್‌ಪುಟ್‌ನ value ನೇರವಾಗಿ query ಸ್ಟೇಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದೆ, ಇದು ಒಂದು ತುರ್ತು ಅಪ್‌ಡೇಟ್ ಆಗಿದೆ.
- ಕೆಳಗಿರುವ ಉತ್ಪನ್ನಗಳ ಪಟ್ಟಿಯು ಹಿಡಿಯಲು ಒಂದು ಕ್ಷಣದಷ್ಟು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳಬಹುದು, ಆದರೆ ಅದರ ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯು ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್ ಅನ್ನು ಎಂದಿಗೂ ತಡೆಯುವುದಿಲ್ಲ.
- ಬಳಕೆದಾರರು ವೇಗವಾಗಿ ಟೈಪ್ ಮಾಡಿದರೆ, ರಿಯಾಕ್ಟ್ ಮಧ್ಯಂತರ, ಹಳೆಯದಾದ ಹಿನ್ನೆಲೆ ರೆಂಡರ್‌ಗಳನ್ನು ತಿರಸ್ಕರಿಸುವುದರಿಂದ, ಪಟ್ಟಿಯು ಅಂತಿಮ ಹುಡುಕಾಟ ಪದದೊಂದಿಗೆ ಕೊನೆಯಲ್ಲಿ ಒಮ್ಮೆ ಮಾತ್ರ ಅಪ್‌ಡೇಟ್ ಆಗಬಹುದು.
ಅಪ್ಲಿಕೇಶನ್ ಈಗ ಗಮನಾರ್ಹವಾಗಿ ವೇಗವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ವೃತ್ತಿಪರವಾಗಿ ಭಾಸವಾಗುತ್ತದೆ.
`useDeferredValue` vs. `useTransition`: ವ್ಯತ್ಯಾಸವೇನು?
ಕನ್‌ಕರೆಂಟ್ ರಿಯಾಕ್ಟ್ ಕಲಿಯುವ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಗೊಂದಲದ ಅಂಶಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. useDeferredValue ಮತ್ತು useTransition ಎರಡನ್ನೂ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ತುರ್ತು-ಅಲ್ಲದವು ಎಂದು ಗುರುತಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಅವುಗಳನ್ನು ವಿಭಿನ್ನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.
ಪ್ರಮುಖ ವ್ಯತ್ಯಾಸವೆಂದರೆ: ನಿಮಗೆ ಎಲ್ಲಿ ನಿಯಂತ್ರಣವಿದೆ?
`useTransition`
ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಕೋಡ್‌ನ ಮೇಲೆ ನಿಮಗೆ ನಿಯಂತ್ರಣವಿದ್ದಾಗ ನೀವು useTransition ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಇದು ನಿಮ್ಮ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಸುತ್ತುವರಿಯಲು, ಸಾಮಾನ್ಯವಾಗಿ startTransition ಎಂದು ಕರೆಯಲ್ಪಡುವ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ನೀಡುತ್ತದೆ.
const [isPending, startTransition] = useTransition();
function handleChange(e) {
const nextValue = e.target.value;
// Update the urgent part immediately
setInputValue(nextValue);
// Wrap the slow update in startTransition
startTransition(() => {
setSearchQuery(nextValue);
});
}
- ಯಾವಾಗ ಬಳಸಬೇಕು: ನೀವೇ ಸ್ಟೇಟ್ ಅನ್ನು ಸೆಟ್ ಮಾಡುತ್ತಿರುವಾಗ ಮತ್ತು setState ಕರೆಯನ್ನು ಸುತ್ತುವರಿಯಲು ಸಾಧ್ಯವಾದಾಗ.
- ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯ: isPending ಎಂಬ ಬೂಲಿಯನ್ ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಟ್ರಾನ್ಸಿಶನ್ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿರುವಾಗ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್‌ಗಳು ಅಥವಾ ಇತರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ತೋರಿಸಲು ಇದು ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿದೆ.
`useDeferredValue`
ಮೌಲ್ಯವನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವ ಕೋಡ್ ಅನ್ನು ನೀವು ನಿಯಂತ್ರಿಸದಿದ್ದಾಗ ನೀವು useDeferredValue ಅನ್ನು ಬಳಸುತ್ತೀರಿ. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಮೌಲ್ಯವು ಪ್ರಾಪ್ಸ್‌ನಿಂದ, ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ, ಅಥವಾ ಮೂರನೇ-ಪಕ್ಷದ ಲೈಬ್ರರಿಯು ಒದಗಿಸಿದ ಮತ್ತೊಂದು ಹೂಕ್‌ನಿಂದ ಬಂದಾಗ ಸಂಭವಿಸುತ್ತದೆ.
function SlowList({ valueFromParent }) {
// We don't control how valueFromParent is set.
// We just receive it and want to defer rendering based on it.
const deferredValue = useDeferredValue(valueFromParent);
// ... use deferredValue to render the slow part of the component
}
- ಯಾವಾಗ ಬಳಸಬೇಕು: ನಿಮ್ಮ ಬಳಿ ಅಂತಿಮ ಮೌಲ್ಯ ಮಾತ್ರವಿದ್ದು, ಅದನ್ನು ಸೆಟ್ ಮಾಡಿದ ಕೋಡ್ ಅನ್ನು ಸುತ್ತುವರಿಯಲು ಸಾಧ್ಯವಾಗದಿದ್ದಾಗ.
- ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯ: ಹೆಚ್ಚು "ರಿಯಾಕ್ಟಿವ್" ವಿಧಾನ. ಇದು ಎಲ್ಲಿಂದ ಬಂದರೂ, ಮೌಲ್ಯ ಬದಲಾಗುವುದಕ್ಕೆ ಸರಳವಾಗಿ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ. ಇದು ಅಂತರ್ನಿರ್ಮಿತ isPending ಫ್ಲ್ಯಾಗ್ ಅನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ, ಆದರೆ ನೀವು ಸುಲಭವಾಗಿ ಒಂದನ್ನು ನೀವೇ ರಚಿಸಬಹುದು.
ಹೋಲಿಕೆ ಸಾರಾಂಶ
| ವೈಶಿಷ್ಟ್ಯ | `useTransition` | `useDeferredValue` |
|---|---|---|
| ಇದು ಏನನ್ನು ಸುತ್ತುವರಿಯುತ್ತದೆ | ಒಂದು ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಫಂಕ್ಷನ್ (ಉದಾ., startTransition(() => setState(...))) |
ಒಂದು ಮೌಲ್ಯ (ಉದಾ., useDeferredValue(myValue)) |
| ನಿಯಂತ್ರಣ ಬಿಂದು | ನೀವು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅಥವಾ ಅಪ್‌ಡೇಟ್‌ಗಾಗಿ ಪ್ರಚೋದಕವನ್ನು ನಿಯಂತ್ರಿಸಿದಾಗ. | ನೀವು ಒಂದು ಮೌಲ್ಯವನ್ನು (ಉದಾ., ಪ್ರಾಪ್ಸ್‌ನಿಂದ) ಸ್ವೀಕರಿಸಿದಾಗ ಮತ್ತು ಅದರ ಮೂಲದ ಮೇಲೆ ಯಾವುದೇ ನಿಯಂತ್ರಣವಿಲ್ಲದಿದ್ದಾಗ. |
| ಲೋಡಿಂಗ್ ಸ್ಥಿತಿ | ಅಂತರ್ನಿರ್ಮಿತ `isPending` ಬೂಲಿಯನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. | ಅಂತರ್ನಿರ್ಮಿತ ಫ್ಲ್ಯಾಗ್ ಇಲ್ಲ, ಆದರೆ `const isStale = originalValue !== deferredValue;` ನೊಂದಿಗೆ ಪಡೆಯಬಹುದು. |
| ಸಾದೃಶ್ಯ | ನೀವು ರವಾನೆದಾರ, ಯಾವ ರೈಲು (ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್) ನಿಧಾನ ಟ್ರ್ಯಾಕ್‌ನಲ್ಲಿ ಹೊರಡುತ್ತದೆ ಎಂದು ನಿರ್ಧರಿಸುತ್ತೀರಿ. | ನೀವು ಸ್ಟೇಷನ್ ಮ್ಯಾನೇಜರ್, ರೈಲಿನಲ್ಲಿ ಬರುವ ಮೌಲ್ಯವನ್ನು ನೋಡಿ ಅದನ್ನು ಮುಖ್ಯ ಬೋರ್ಡ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ಮೊದಲು ಒಂದು ಕ್ಷಣ ಸ್ಟೇಷನ್‌ನಲ್ಲಿ ಹಿಡಿದಿಡಲು ನಿರ್ಧರಿಸುತ್ತೀರಿ. |
ಸುಧಾರಿತ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಪ್ಯಾಟರ್ನ್‌ಗಳು
ಸರಳ ಪಟ್ಟಿ ಫಿಲ್ಟರಿಂಗ್‌ಗೂ ಮೀರಿ, useDeferredValue ಅತ್ಯಾಧುನಿಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಹಲವಾರು ಶಕ್ತಿಯುತ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ.
ಪ್ಯಾಟರ್ನ್ 1: ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ "ಹಳೆಯ" UI ಅನ್ನು ತೋರಿಸುವುದು
ಯಾವುದೇ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆಯಿಲ್ಲದೆ ಸ್ವಲ್ಪ ವಿಳಂಬದೊಂದಿಗೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ UI ಬಳಕೆದಾರರಿಗೆ ದೋಷಪೂರ್ಣವಾಗಿ ಕಾಣಿಸಬಹುದು. ತಮ್ಮ ಇನ್‌ಪುಟ್ ನೋಂದಾಯಿಸಲ್ಪಟ್ಟಿದೆಯೇ ಎಂದು ಅವರು ಆಶ್ಚರ್ಯಪಡಬಹುದು. ಡೇಟಾ ಅಪ್‌ಡೇಟ್ ಆಗುತ್ತಿದೆ ಎಂಬ ಸೂಕ್ಷ್ಮ ಸೂಚನೆಯನ್ನು ನೀಡುವುದು ಒಂದು ಉತ್ತಮ ಪ್ಯಾಟರ್ನ್ ಆಗಿದೆ.
ಮೂಲ ಮೌಲ್ಯವನ್ನು ಡಿಫರ್ಡ್ ಮೌಲ್ಯದೊಂದಿಗೆ ಹೋಲಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು. ಅವು ವಿಭಿನ್ನವಾಗಿದ್ದರೆ, ಹಿನ್ನೆಲೆ ರೆಂಡರ್ ಬಾಕಿ ಇದೆ ಎಂದರ್ಥ.
function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// This boolean tells us if the list is lagging behind the input
const isStale = query !== deferredQuery;
const filteredProducts = useMemo(() => {
// ... expensive filtering using deferredQuery
}, [deferredQuery]);
return (
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಳಕೆದಾರರು ಟೈಪ್ ಮಾಡಿದ ತಕ್ಷಣ, isStale ಸತ್ಯವಾಗುತ್ತದೆ. ಪಟ್ಟಿಯು ಸ್ವಲ್ಪ ಮಸುಕಾಗುತ್ತದೆ, ಅದು ಅಪ್‌ಡೇಟ್ ಆಗಲಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಡಿಫರ್ಡ್ ರೆಂಡರ್ ಪೂರ್ಣಗೊಂಡ ನಂತರ, query ಮತ್ತು deferredQuery ಮತ್ತೆ ಸಮಾನವಾಗುತ್ತವೆ, isStale ಸುಳ್ಳಾಗುತ್ತದೆ, ಮತ್ತು ಪಟ್ಟಿಯು ಹೊಸ ಡೇಟಾದೊಂದಿಗೆ ಪೂರ್ಣ ಅಪಾರದರ್ಶಕತೆಗೆ ಮರಳುತ್ತದೆ. ಇದು useTransition ನಿಂದ ಬರುವ isPending ಫ್ಲ್ಯಾಗ್‌ಗೆ ಸಮಾನವಾಗಿದೆ.
ಪ್ಯಾಟರ್ನ್ 2: ಚಾರ್ಟ್‌ಗಳು ಮತ್ತು ದೃಶ್ಯೀಕರಣಗಳ ಮೇಲಿನ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಡಿಫರ್ ಮಾಡುವುದು
ದಿನಾಂಕ ಶ್ರೇಣಿಗಾಗಿ ಬಳಕೆದಾರ-ನಿಯಂತ್ರಿತ ಸ್ಲೈಡರ್ ಅನ್ನು ಆಧರಿಸಿ ಮರು-ರೆಂಡರ್ ಆಗುವ ಭೌಗೋಳಿಕ ನಕ್ಷೆ ಅಥವಾ ಹಣಕಾಸು ಚಾರ್ಟ್‌ನಂತಹ ಸಂಕೀರ್ಣ ಡೇಟಾ ದೃಶ್ಯೀಕರಣವನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಸ್ಲೈಡರ್ ಅನ್ನು ಎಳೆಯುವುದು, ಚಾರ್ಟ್ ಪ್ರತಿ ಪಿಕ್ಸೆಲ್ ಚಲನೆಗೂ ಮರು-ರೆಂಡರ್ ಆದರೆ ಅತ್ಯಂತ ಜರ್ಕಿ ಆಗಬಹುದು.
ಸ್ಲೈಡರ್‌ನ ಮೌಲ್ಯವನ್ನು ಡಿಫರ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಸ್ಲೈಡರ್ ಹ್ಯಾಂಡಲ್ ಸ್ವತಃ ನಯವಾಗಿ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲವಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು, ಆದರೆ ಭಾರೀ ಚಾರ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಸುಲಲಿತವಾಗಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ.
function ChartDashboard() {
const [year, setYear] = useState(2023);
const deferredYear = useDeferredValue(year);
// HeavyChart is a memoized component that does expensive calculations
// It will only re-render when the deferredYear value settles.
const chartData = useMemo(() => computeChartData(deferredYear), [deferredYear]);
return (
ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು
ಶಕ್ತಿಯುತವಾಗಿದ್ದರೂ, useDeferredValue ಅನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಬೇಕು. ಅನುಸರಿಸಬೇಕಾದ ಕೆಲವು ಪ್ರಮುಖ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳು ಇಲ್ಲಿವೆ:
- ಮೊದಲು ಪ್ರೊಫೈಲ್ ಮಾಡಿ, ನಂತರ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿ: ಎಲ್ಲೆಡೆ useDeferredValue ಅನ್ನು ಬಳಸಬೇಡಿ. ನೈಜ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ರಿಯಾಕ್ಟ್ ಡೆವ್‌ಟೂಲ್ಸ್ ಪ್ರೊಫೈಲರ್ ಅನ್ನು ಬಳಸಿ. ಈ ಹೂಕ್ ನಿರ್ದಿಷ್ಟವಾಗಿ ಮರು-ರೆಂಡರ್ ನಿಜವಾಗಿಯೂ ನಿಧಾನವಾಗಿದ್ದು, ಕೆಟ್ಟ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುವ ಸಂದರ್ಭಗಳಿಗಾಗಿ ಆಗಿದೆ.
- ಡಿಫರ್ ಮಾಡಿದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಯಾವಾಗಲೂ ಮೆಮೊಯಿಜ್ ಮಾಡಿ: ಮೌಲ್ಯವನ್ನು ಡಿಫರ್ ಮಾಡುವುದರ ಪ್ರಾಥಮಿಕ ಪ್ರಯೋಜನವೆಂದರೆ ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅನಗತ್ಯವಾಗಿ ಮರು-ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸುವುದು. ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು React.memo ದಲ್ಲಿ ಸುತ್ತುವರಿದಾಗ ಈ ಪ್ರಯೋಜನವು ಸಂಪೂರ್ಣವಾಗಿ ಅರಿತುಕೊಳ್ಳಲ್ಪಡುತ್ತದೆ. ಇದು ಅದರ ಪ್ರಾಪ್ಸ್ (ಡಿಫರ್ ಮಾಡಿದ ಮೌಲ್ಯ ಸೇರಿದಂತೆ) ನಿಜವಾಗಿ ಬದಲಾದಾಗ ಮಾತ್ರ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಡಿಫರ್ ಮಾಡಿದ ಮೌಲ್ಯವು ಇನ್ನೂ ಹಳೆಯದಾಗಿರುವ ಆರಂಭಿಕ ಹೆಚ್ಚಿನ-ಆದ್ಯತೆಯ ರೆಂಡರ್ ಸಮಯದಲ್ಲಿ ಅಲ್ಲ.
- ಬಳಕೆದಾರರಿಗೆ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಿ: "ಹಳೆಯ UI" ಪ್ಯಾಟರ್ನ್‌ನಲ್ಲಿ ಚರ್ಚಿಸಿದಂತೆ, ಯಾವುದೇ ರೀತಿಯ ದೃಶ್ಯ ಸೂಚನೆಯಿಲ್ಲದೆ UI ಅನ್ನು ವಿಳಂಬದೊಂದಿಗೆ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಎಂದಿಗೂ ಬಿಡಬೇಡಿ. ಪ್ರತಿಕ್ರಿಯೆಯ ಕೊರತೆಯು ಮೂಲ ಲ್ಯಾಗ್‌ಗಿಂತ ಹೆಚ್ಚು ಗೊಂದಲಮಯವಾಗಿರಬಹುದು.
- ಇನ್‌ಪುಟ್‌ನ ಮೌಲ್ಯವನ್ನು ಸ್ವತಃ ಡಿಫರ್ ಮಾಡಬೇಡಿ: ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪೆಂದರೆ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿಯಂತ್ರಿಸುವ ಮೌಲ್ಯವನ್ನು ಡಿಫರ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸುವುದು. ಇನ್‌ಪುಟ್‌ನ value ಪ್ರಾಪ್ ಯಾವಾಗಲೂ ಹೆಚ್ಚಿನ-ಆದ್ಯತೆಯ ಸ್ಟೇಟ್‌ಗೆ ಸಂಬಂಧಿಸಿರಬೇಕು, ಅದು ತಕ್ಷಣವೇ ಭಾಸವಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು. ನೀವು ನಿಧಾನವಾದ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ರವಾನೆಯಾಗುತ್ತಿರುವ ಮೌಲ್ಯವನ್ನು ಡಿಫರ್ ಮಾಡುತ್ತೀರಿ.
- `timeoutMs` ಆಯ್ಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ (ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ): useDeferredValue ಟೈಮ್‌ಔಟ್‌ಗಾಗಿ ಐಚ್ಛಿಕ ಎರಡನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ:
useDeferredValue(value, { timeoutMs: 500 }). ಇದು ರಿಯಾಕ್ಟ್‌ಗೆ ಮೌಲ್ಯವನ್ನು ಗರಿಷ್ಠ ಎಷ್ಟು ಸಮಯದವರೆಗೆ ಡಿಫರ್ ಮಾಡಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ. ಇದು ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಬಹುದಾದ ಸುಧಾರಿತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ, ಆದರೆ ಸಾಮಾನ್ಯವಾಗಿ, ರಿಯಾಕ್ಟ್ ಸಮಯವನ್ನು ನಿರ್ವಹಿಸಲು ಬಿಡುವುದು ಉತ್ತಮ, ಏಕೆಂದರೆ ಅದು ಸಾಧನದ ಸಾಮರ್ಥ್ಯಗಳಿಗೆ ಹೊಂದುವಂತೆ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಲ್ಪಟ್ಟಿದೆ.
ಜಾಗತಿಕ ಬಳಕೆದಾರರ ಅನುಭವದ (UX) ಮೇಲೆ ಪರಿಣಾಮ
useDeferredValue ನಂತಹ ಸಾಧನಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವುದು ಕೇವಲ ತಾಂತ್ರಿಕ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅಲ್ಲ; ಇದು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಉತ್ತಮ, ಹೆಚ್ಚು ಒಳಗೊಳ್ಳುವ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಒಂದು ಬದ್ಧತೆಯಾಗಿದೆ.
- ಸಾಧನ ಸಮಾನತೆ: ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಉನ್ನತ-ದರ್ಜೆಯ ಯಂತ್ರಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತಾರೆ. ಹೊಸ ಲ್ಯಾಪ್‌ಟಾಪ್‌ನಲ್ಲಿ ವೇಗವಾಗಿ ಭಾಸವಾಗುವ UI, ಹಳೆಯ, ಕಡಿಮೆ-ಸ್ಪೆಕ್ ಮೊಬೈಲ್ ಫೋನ್‌ನಲ್ಲಿ ನಿರುಪಯುಕ್ತವಾಗಬಹುದು, ಇದು ವಿಶ್ವದ ಜನಸಂಖ್ಯೆಯ ಗಮನಾರ್ಹ ಭಾಗಕ್ಕೆ ಪ್ರಾಥಮಿಕ ಇಂಟರ್ನೆಟ್ ಸಾಧನವಾಗಿದೆ. ನಾನ್-ಬ್ಲಾಕಿಂಗ್ ರೆಂಡರಿಂಗ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಹಾರ್ಡ್‌ವೇರ್‌ಗಳಲ್ಲಿ ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳದ್ದಾಗಿ ಮಾಡುತ್ತದೆ.
- ಸುಧಾರಿತ ಪ್ರವೇಶಸಾಧ್ಯತೆ (Accessibility): ಫ್ರೀಜ್ ಆಗುವ UI ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು ಮತ್ತು ಇತರ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳ ಬಳಕೆದಾರರಿಗೆ ವಿಶೇಷವಾಗಿ ಸವಾಲಾಗಿರಬಹುದು. ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ಮುಕ್ತವಾಗಿಡುವುದು ಈ ಉಪಕರಣಗಳು ಸರಾಗವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ಮುಂದುವರಿಸಲು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಕಡಿಮೆ ಹತಾಶೆಯ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಹೆಚ್ಚಿದ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆ: ಬಳಕೆದಾರರ ಅನುಭವದಲ್ಲಿ ಮನೋವಿಜ್ಞಾನವು ದೊಡ್ಡ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ. ಇನ್‌ಪುಟ್‌ಗೆ ತಕ್ಷಣವೇ ಪ್ರತಿಕ್ರಿಯಿಸುವ ಇಂಟರ್ಫೇಸ್, ಪರದೆಯ ಕೆಲವು ಭಾಗಗಳು ಅಪ್‌ಡೇಟ್ ಆಗಲು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಂಡರೂ, ಆಧುನಿಕ, ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ಉತ್ತಮವಾಗಿ ರಚಿಸಲ್ಪಟ್ಟಿದೆ ಎಂದು ಭಾಸವಾಗುತ್ತದೆ. ಈ ಗ್ರಹಿಸಿದ ವೇಗವು ಬಳಕೆದಾರರ ವಿಶ್ವಾಸ ಮತ್ತು ತೃಪ್ತಿಯನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ.
ತೀರ್ಮಾನ
ರಿಯಾಕ್ಟ್‌ನ useDeferredValue ಹೂಕ್ ನಾವು ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಹೇಗೆ ಸಂಪರ್ಕಿಸುತ್ತೇವೆ ಎಂಬುದರಲ್ಲಿ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯಾಗಿದೆ. ಡಿಬೌನ್ಸಿಂಗ್ ಮತ್ತು ಥ್ರಾಟ್ಲಿಂಗ್‌ನಂತಹ ಹಸ್ತಚಾಲಿತ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಕೀರ್ಣವಾದ ತಂತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿಸುವ ಬದಲು, ನಾವು ಈಗ ನಮ್ಮ UIನ ಯಾವ ಭಾಗಗಳು ಕಡಿಮೆ ನಿರ್ಣಾಯಕವೆಂದು ರಿಯಾಕ್ಟ್‌ಗೆ ಘೋಷಣಾತ್ಮಕವಾಗಿ ಹೇಳಬಹುದು, ಇದು ಹೆಚ್ಚು ಬುದ್ಧಿವಂತ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ರೀತಿಯಲ್ಲಿ ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ನಿಗದಿಪಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಕನ್‌ಕರೆನ್ಸಿಯ ಮೂಲ ತತ್ವಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, useDeferredValue ಅನ್ನು useTransition ವಿರುದ್ಧ ಯಾವಾಗ ಬಳಸಬೇಕೆಂದು ತಿಳಿದುಕೊಳ್ಳುವ ಮೂಲಕ, ಮತ್ತು ಮೆಮೊಯಿಜೇಶನ್ ಮತ್ತು ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಯಂತಹ ಅತ್ಯುತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು UI ಜರ್ಕ್ ಅನ್ನು ತೊಡೆದುಹಾಕಬಹುದು ಮತ್ತು ಕೇವಲ ಕ್ರಿಯಾತ್ಮಕವಾಗಿರದ, ಆದರೆ ಬಳಸಲು ಸಂತೋಷಕರವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಸ್ಪರ್ಧಾತ್ಮಕ ಜಾಗತಿಕ ಮಾರುಕಟ್ಟೆಯಲ್ಲಿ, ವೇಗವಾದ, ಸ್ಪಂದನಾಶೀಲ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುವುದು ಅಂತಿಮ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ, ಮತ್ತು ಅದನ್ನು ಸಾಧಿಸಲು ನಿಮ್ಮ ಶಸ್ತ್ರಾಗಾರದಲ್ಲಿ useDeferredValue ಅತ್ಯಂತ ಶಕ್ತಿಯುತ ಸಾಧನಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.